<template>
	<view class="backdrop">
		<view class="toububu">
			<image class="fanhui" :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" mode="" @click="handleClick"></image>
		</view>
		
		<view class="shipingg">
					<z-swiper v-model="list" :options="options" @slideChange="onChange" ref="zSwiper">
							  	<z-swiper-item v-for="(item,index) in list" :key="index">
							  		<!-- <image class="image" :src="item" mode="aspectFill"></image> -->
									<video class="image" :src="item" mode="aspectFill" controls ></video>
									<template #indicator>
										<view class="custom-indicator">{{ current + 1 }}/{{list.length}}</view>
									</template>
							  	</z-swiper-item>
					</z-swiper>
				</view>
				<view class="dadadad">
					<view class="slider">这不是我家那边吗？</view>
				</view>
				
				<view class="dadadad2">
					<view class="slider2">哇，居然还可以这样</view>
				</view>
		<view class="dahezi">
		

		<view class="zhutii">
			<view class="containers">
				<image @click="showPhotoGallery = true" :src="mainImageUrl" class="main-image"></image>
				       <view v-if="showPhotoGallery" class="photo-gallery-modal">
						   <view class="prev-arrow">
								<image @click="currentPhotoIndex--" :src="prevArrowUrl" class="prev-arrowhe" v-if="currentPhotoIndex > 0"></image>
								
						   </view>
				         <image :src="photoList[currentPhotoIndex]" class="photo-item-modal"></image>
						 <view class="next-arrow">
				         <image @click="currentPhotoIndex++" :src="nextArrowUrl" class="next-arrowhe" v-if="currentPhotoIndex < photoList.length - 1"></image>	
						 </view>
						 <image @click="closePhotoGallery" :src="imageUrl + '/tesewuchan/Frame2x.png'" class="close-button"></image>
				       </view>
			</view>
			<!-- <image class="photoAlbum" :src="imageUrl + '/tesewuchan/tesewuchanzhaopianji.png'" mode=""></image> -->
			<p class="MainTitle">长沙学院三下乡—盐井新场文化驿站</p>
			<!-- <p class="MainTitles">化驿站</p> -->
			<p class="subtitle">发布于</p>
			<p class="subtitles">2024-06-06</p>
			<p class="bodyText">近日，长沙学院芙蓉学子 “驿帆风顺，电商振乡” 公共文化服务实践团于近日抵达湘西土家族苗族自治州永顺县盐井乡新场村开展暑期三下乡实践活动。
				<span style="color: orange;">实践团创作推出 “有梦、追梦、圆梦” 三个 “我与土家莓茶系列故事</span>，在新媒体传播中获得 10 万次以上浏览、点赞量，反响热烈。
			</p>
		</view>

		<image class="embeddedImage" :src="imageUrl + '/tesewuchan/tesewuchanren.png'" mode=""></image>

		<view class="subtext">
			<p class="fuwen">实践团在学校做拍摄准备阶段，游丰豪、邝京欢、马诗瑜等多次与裴老师开会讨论。在老师的指导下，决定从 “高校师生与莓茶的邂逅”“返乡创业青年的莓茶……</p>
			<p class="fuwens"> 
			
			<span style="color: orange;">请持续关注“盐井新场文化驿站”公众号，</span>
			让我们一起见证并参与这场关于文化、科技、教育与梦想的乡村振兴之旅！
			</p>
			
			<image class="QRcode" :src="imageUrl + '/tesewuchan/tesewuchanerweima.png'" mode=""></image>

			<view class="signature">

				<view class="finish">
					<span>——</span>
					<span style="margin: 16rpx;font-size: 28rpx;">结束</span>
					<span>——</span>
				</view>

				<p class="xiaohon">//编辑:小红</p>
				<p class="xiaohon">//排版:小红</p>
				<p class="xiaohon">//审核:小红</p>
				<p class="xiaohon">长沙学院公共文化服务团出品</p>
			</view>

			<p class="theme">主题系列</p>
			<image class="redCulture-img" :src="imageUrl + '/tesewuchan/tesewucghantuantizhao.png'" mode=""></image>
			<view class="redCulture">
				<p class="redCulture-p">长沙学院三下乡一长沙望城桥驿镇</p>
			<image class="redCulture-img" :src="imageUrl + '/tesewuchan/tesewuchanjitizhao.png'" mode=""></image>
				<p class="redCulture-p">长沙学院三下乡一红色文化追光行</p>
			</view>

		</view>
		</view>




		<view class="xian"></view>
		<view class="dahezi">

		<view class="subtext">

			<p class="liuyan">留言墙</p>
			<p class="xiaozi">20条</p>

			<view class="">
			<image class="avatar" :src="imageUrl + '/tesewuchan/tesewuchantouxianmg.png'" mode=""></image>

				<input
				 v-model="inputValue"
				 class="my-input"
				 type="text"
				 placeholder="快来留言吧，留下你的独特印记!"
				 @confirm="addMessage"/>
				<image class="messageBox" :src="imageUrl+'/tswc/bianji.png'" mode=""></image>
				<view class="pinlunqu">
					<image class="avatar" style="margin-top: 60rpx;" :src="imageUrl + '/tesewuchan/tesewuchantouxianmg.png'" mode=""></image>
					<p class="travel">旅行者</p>
					<image class="like" :src="imageUrl + '/tesewuchan/tesewuchandianzan.png'" mode=""></image>
					<p class="comment">有了你们，乡村会更加美丽！</p>
					
					<view class="day">
						<span style="color: #bfbfbf;font-size: 20rpx;">2024-08-08</span>
						<span style="color: #bfbfbf;font-size: 20rpx;margin-left: 10rpx;">长沙</span>
					</view>
					<p class="zanshu" >23</p>
					<view style="width: 100vw;height: 2rpx;border: 2rpx solid rgba(64,112,114,0.1);margin-left: -23px;">
					</view>
					
					<image class="avatar" style="margin-top: 60rpx;" :src="imageUrl + '/tesewuchan/tesewuchantouxianmg.png'" mode=""></image>
					<p class="travel">旅行者</p>
					<image class="like" :src="imageUrl + '/tesewuchan/tesewuchandianzan.png'" mode=""></image>
					<p class="comment">厉害了</p>
					<view class="day">
						<span style="color: #bfbfbf;font-size: 20rpx;">2024-08-08</span>
						<span style="color: #bfbfbf;font-size: 20rpx;margin-left: 10rpx;">长沙</span>
					</view>
					<p class="zanshu" >23</p>
					<view style="width: 100vw;height: 2rpx;border: 2rpx solid rgba(64,112,114,0.1);margin-left: -23px;">
					</view>
					
					<image class="avatar" style="margin-top: 60rpx;" :src="imageUrl + '/tesewuchan/tesewuchantouxianmg.png'" mode=""></image>
					<p class="travel">旅行者</p>
					<image class="like" :src="imageUrl + '/tesewuchan/tesewuchandianzan.png'" mode=""></image>
					<p class="comment">厉害了</p>
					<view class="day">
						<span style="color: #bfbfbf;font-size: 20rpx;">2024-08-08</span>
						<span style="color: #bfbfbf;font-size: 20rpx;margin-left: 10rpx;">长沙</span>
					</view>
					<p class="zanshu" >23</p>
				</view>
				
			</view>

		</view>

	</view>
		<view class="block">
			<p style="text-align: center;line-height: 90rpx;color: #808d84;">查看全部评论</p>
		</view>
		<view style="height: 158rpx;"></view>
		<image class="dibu" src="https://xnlv.lizxx.com/image/xnlv/static/tesewuchan/tesewuchandibudaohang.png" mode=""></image>
	</view>
</template>

<script>
	
	export default {
		data(){
			return {
				mainImageUrl: 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/tesewuchanzhaopianji.png',//初始图片
				showPhotoGallery: false,
				currentPhotoIndex: 0,
				prevArrowUrl: 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/Group28121.png',//左箭头
				nextArrowUrl: 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/Group2812.png',//右箭头
				
				 photoList: [
				           	'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/2024-07-14064139-1.jpg',
				           	'https://xnlv-test.lizxx.com/image/xnlv/static//tesewuchan/17275787081524.png',
				           'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275787478563.png',
				           	'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275787861280.png',
				           	'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275790941708.png',
				           	'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275791299327.png',
				           	'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275791775979.png',
				           	'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275792083756.png',
				           // 添加更多照片地址
				         ],
				
				imageUrl: this.$imageUrl,
				inputValue: '',
				current: 0,
				options: {
					// effect: 'fade',
					pagination: {
					el: true,
					type: 'fraction',
						},
					fadeEffect: {
						crossFade: true
					},
				},
				list: [
						        // 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/tese9.mkv',
						        // 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/cunmin.mkv',
						        // 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/gaoxiao.mkv',
						        'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/fxcy3.mp4',
						        'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/cunmin3.mp4',
						        'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/gaoxiao3.mp4',
						        
						      ],
				currentIndex: 0,
			}
			
		},
		methods: {
			handleClick() {
				wx.redirectTo({
					url: '/pagesNew/pages/home/home',
				});
			},
			
			onChange(swiper, index) {
			    //小程序第一个swiper参数为空，请勿使用
				uni.showToast({
					title: '当前 swiper 索引：' + this.$refs.zSwiper.swiper.activeIndex,
					icon: 'none'
				})
			},
			onChange() {
				this.current = this.$refs.zSwiper.swiper.activeIndex;
			},
			changSwiper(index) {
				if (index != this.current1) {
					this.$refs.zSwiper1.swiper.slideTo(index, 300, false);
				}
			},
			closePhotoGallery() {
					         this.showPhotoGallery = false;
					       },
			
					}
			}
		
</script>

<style>
	.close-button {
		/* 关闭按钮 */
		width: 62rpx;
		height: 62rpx;
		margin-top: 20rpx;
	}
	.containers {
	       /* 容器的整体样式 */
	       display: flex;
	       flex-direction: column;
	       align-items: center;
		   z-index: 100;
	   }
	  .main-image {
	       /* 主图片的样式 */
	       width: 80rpx;
	       	height: 80rpx;
		   z-index: 98;
		   position: relative;
		   top: 89rpx;
		   left: 240rpx;
	   }
	  .photo-gallery-modal {
	       /* 照片集弹窗的样式 */
	       position: fixed;
	       top: 0;
	       left: 0;
	       right: 0;
	       bottom: 0;
	       background-color: rgba(0, 0, 0, 0.5);
	       display: flex;
	       flex-direction: column;
	       justify-content: center;
	       align-items: center;
		   z-index: 100;
	   }
	  .prev-arrow{
		  /* 左箭头的样式 */
		  width: 60rpx;
		  height: 60rpx;
		  cursor: pointer;
		  z-index: 101;
		  /* position: absolute;
		  left: 0;
		  top: 47%; */
	  }
	  .prev-arrowhe {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: rgba(0,0,0,0.4);
			z-index: 101;
			position: absolute;
			left: 0;
			top: 47%;
			/* padding-top: 5rpx; */
			padding-right: 5rpx;
	  }
	  .next-arrow {
	       /* 右箭头的样式 */
	       width: 60rpx;
	       height: 60rpx;
	       cursor: pointer;
		   margin-left: 5rpx;
		   z-index: 101;
		   /* position: absolute;
		   	right: 0;
		   	top: 47%; */
	   }
	   .next-arrowhe {
		   width: 50rpx;
		   height: 50rpx;
		   border-radius: 50%;
		   background-color: rgba(0,0,0,0.4);
		   z-index: 101;
			position: absolute;
			right: 0;
			top: 47%;
			/* padding-top: 5rpx; */
			padding-left: 5rpx;
	   }
	  .photo-item-modal {
	       /* 弹窗中照片的样式 */
	       width: 100vw;
	       height: 30vh;
		   z-index: 100;
	   }
	
	.themetu {
	    width: 659.34rpx;
	    height: 246.56rpx;
	    margin-top: 24rpx;
	    margin-bottom: 24rpx;
	}
	.dadadad1 {
	    width: 100vw;
	    margin-top: -200rpx;
	    z-index: 98;
	    position: absolute;
	    opacity: 0.7;
	}
	.dadadad2 {
	    width: 100vw;
	    margin-top: -400rpx;
	    z-index: 98;
	    position: absolute;
	    opacity: 0.7;
	}
	.dadadad {
	    width: 100vw;
	    margin-top: -440rpx;
	    z-index: 98;
	    position: absolute;
	    opacity: 0.7;
	}
	.slider2 {
	    width: 320rpx;
	    height: 46rpx;
	    padding-top: 4rpx;
	    padding-left: 20rpx;
	    color: white;
	    background-color: #888888;
	    position: relative;
	    margin-left: 100%;
	    animation: slideFromRight2 12s linear infinite;
	    border-radius: 40rpx;
	}
	@keyframes slideFromRight2 {
	    from {
	        opacity: 1;
	        right: -200%;
	    }
	    to {
	        opacity: 1;
	        right: 300%;
	    }
	}
	.slider {
	    width: 300rpx;
	    height: 46rpx;
	    padding-top: 4rpx;
	    padding-left: 20rpx;
	    color: white;
	    background-color: #888888;
	    position: relative;
	    margin-left: 100%;
	    animation: slideFromRight 8s linear infinite;
	    border-radius: 40rpx;
	}
	@keyframes slideFromRight {
	    from {
	        opacity: 1;
	        right: 0%;
	    }
	    to {
	        opacity: 1;
	        right: 300%;
	    }
	}
	/*.pinlunqu {
	    height: 300rpx;
	    overflow: auto;
	    width: 750rpx;
	} */
	.toububu {
	    width: 100vw;
	    height: 180rpx;
	    background-color: #f2f2f2;
	    position: fixed;
	    z-index: 99;
	}
	.shipingg {
	    margin-top: 240rpx;
	}
	.container {
	    position: relative;
	}
	.image {
	    width: 100vw;
	    height: 442rpx;
	}
	.swiper-pagination-fraction.data-v-2ff4d8de,.swiper-pagination-custom.data-v-2ff4d8de,.swiper-horizontal >.swiper-pagination-bullets.data-v-2ff4d8de,.swiper-pagination-bullets.swiper-pagination-horizontal.data-v-2ff4d8de {
		    bottom: 20rpx;
		    left: 88%!important;
			/* right: 10%!important; */
		    width: 9%!important;
		    height: 8%!important;
			color: white;
			padding-top: 1%;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			background-color: rgba(0, 0, 0, 0.5);
			
		}
	.custom-indicator {
	    position: absolute;
	    right: 0!important;
	    bottom: 60rpx;
	    padding: 8rpx 20rpx;
	    font-size: 48rpx;
	    color: #FFFFFF;
	    background: rgba(0, 0, 0, 0.1);
	    z-index: 10;
	}
	.image-index {
	    position: absolute;
	    bottom: 20rpx;
	    right: 20rpx;
	    font-size: 24rpx;
	}
	.zanshu {
	    color: #bfbfbf;
	    font-size: 20rpx;
	    position: relative;
	    left: 590rpx;
	    top: -30rpx;
	}
	.my-input {
	    z-index: 2;
	    width: 505rpx;
	    height: 60rpx;
	    /* margin-top: 90rpx; */
	    margin-left: 18rpx;
	    padding-left: 30rpx;
	    background: #E4EBE9;
	    border-radius: 200rpx;
	    font-size: 28rpx;
	    color: black;
	    background-repeat: no-repeat;
	    background-position: right center;
	    padding-right: 20rpx;
	    display: inline-block;
	}
	.zhutii {
	    width: 672rpx;
	    /* margin-left: 23px; */
		margin-top: -40rpx;
	}
	.dahezi {
	    width: 672rpx;
	    margin: auto;
	}
	.fanhui {
	    width: 38rpx;
	    height: 38rpx;
	    margin-top: 120rpx;
	    margin-left: 20rpx;
	    top: 0px;
	    position: fixed;
	    z-index: 99;
	}
	.dibu {
	    width: 100vw;
	    height: 160rpx;
	    position: fixed;
	    bottom: 0;
	    z-index: 98;
	}
	.block {
	    width: 100vw;
	    height: 90rpx;
	    background-color: #e4ebe9;
	    /* position: fixed; */
	}
	.day {
	    margin-left: 80rpx;
	}
	.comment {
	    font-size: 24rpx;
	    color: #545454;
	    display: inline-block;
	    margin-left: -90rpx;
	}
	.travel {
	    font-size: 20rpx;
	    color: #808d84;
	    font-weight: 560;
	    display: inline-block;
	    position: relative;
	    top: -40rpx;
	    left: 20rpx;
	}
	.like {
	    width: 42rpx;
	    height: 42rpx;
	    display: inline-block;
	    position: relative;
	    top: 20rpx;
	    left: 462rpx;
	}
	.messageBox {
	    width: 32rpx;
	    height: 32rpx;
	    /* display: inline-block; */
	    /* margin-left: -20px;
	    margin-top: -5px; */
	    position: relative;
	    left: -50rpx;
	    top: -16rpx;
	}
	.avatar {
	    width: 60rpx;
	    height: 60rpx;
	    display: inline-block;
	    margin-top: 14rpx;
	}
	.xiaozi {
	    font-size: 24rpx;
	    display: inline-block;
	    color: #bfbfbf;
	    margin-left: 10rpx;
	}
	.liuyan {
	    width: 96rpx;
	    height: 48rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: bold;
	    font-size: 32rpx;
	    color: #808D84;
	    line-height: 38rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	    display: inline-block;
	}
	.xian {
	    width: 100vw;
	    height: 20rpx;
	    background: #E4EBE9;
	    border-radius: 0px 0px 0px 0px;
	    margin-top: 34rpx;
	    margin-bottom: 34rpx;
	}
	.redCulture-p {
	    font-size: 26rpx;
	    color: #545454;
	    font-weight: 560;
	}
	.redCulture-img {
	    width: 658rpx;
	    height: 248rpx;
	    margin-top: 24rpx;
	    margin-bottom: 24rpx;
	}
	.redCulture {
	    /* margin-top: 260rpx; */
	}
	.theme {
	    color: #808d84;
	    font-weight: 560;
	    margin-top: 40rpx;
	}
	.finish {
	    margin-left: 220rpx;
	}
	.xiaohon {
	    font-size: 26rpx;
	    margin-top: 30rpx;
	}
	.signature {
	    color: #bfbfbf;
	}
	.QRcode {
	    width: 672rpx;
	    height: 212rpx;
	    margin-top: 30rpx;
	}
	.fuwen {
	    color: #444444;
	    display: block;
	    font-size: 28rpx;
	    line-height: 1.5;
	}
	.fuwens {
	    color: #444444;
	    display: block;
	    font-size: 28rpx;
	    line-height: 1.5;
	    margin-top: 60rpx;
	}
	.subtext {
	    width: 672rpx;
	    /* margin-left: 23px; */
	}
	.embeddedImage {
	    width: 680rpx;
	    height: 396rpx;
	    /* margin-left: 23px; */
	}
	.bodyText {
	    color: #444444;
	    display: block;
	    font-size: 28rpx;
	    width: 680rpx;
	    /* margin-left: 23px; */
	    line-height: 1.5;
	}
	.subtitles {
	    font-size: 24rpx;
	    color: #bfbfbf;
	    display: inline-block;
	    /* margin-left: 20rpx; */
		margin-left: 20rpx;
	}
	.subtitle {
	    font-size: 24rpx;
	    color: #bfbfbf;
	    display: inline-block;
	    
	}
	.photoAlbum {
	    width: 80rpx;
	    height: 80rpx;
	    display: inline-block;
	    /* margin-left: 560rpx;
	    margin-top: -260rpx; */
	    position: relative;
	    top: 90rpx;
	    left: 570rpx;
	}
	.MainTitles {
	    width: 518rpx;
	    height: 104rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 40rpx;
	    color: #444444;
	    line-height: 52rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	}
	.MainTitle {
	    width: 518rpx;
	    height: 104rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 40rpx;
	    color: #444444;
	    line-height: 52rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	}
	.video {
	    width: 750rpx;
	    height: 442rpx;
	    border-radius: 0px 0px 0px 0px;
	}
	.backdrop {
	    background-color: #f2f2f2;
	    height: 100vh;
	    width: 100vw;
	    position: fixed;
	    top: 0;
	    left: 0;
	    overflow: auto;
	    overflow-x: hidden;
	}
</style>